<template>
 <div class="roleDeploy">
		<el-tree
			:data="authTree"
			show-checkbox
			node-key="id"
			:props="treeProps"
			:check-strictly="true"
			@check-change="handleCheckChange"
			@check="nodeCheck"
			:default-checked-keys="checkedKeys"
			ref="tree"
		>
		</el-tree>
		<p class="btn">
		<el-button type="warning" @click="configurationAuthority">配置权限</el-button>
		</p>
		<!-- <div slot="footer" class="dialog-footer">
			<el-button @click="dialogAuthorityFormVisible = false">取 消</el-button>
			<el-button :loading="authButtonLoading" type="primary" @click="handleUpdateAuth">确 定</el-button>
		</div> -->
  </div>
</template>

<script>
  export default {
  	name:'roleDeploy',
  	props:['id'],
    data() {
      return {
      	authTree:[],
      	checkedKeys:[],
      	treeProps:{
          label: 'permissionName',
          children: 'children'
        },
      }
    },
    created(){
    	// this.getModelByRoleId();
    	// this.getAuthList();
    },
    methods:{
    	getAuthList(){
    		this.$axios({
    			method:'get',
    			url:'/system/permission/getPermissionTree',
    		}).then((res) => {
    			this.authTree = res.data;
    		})
    	},

    //选中节点触发事件
		handleCheckChange(data, checked, indeterminate){
			// console.log(data)
			// var node = this.$refs.tree.getNode(data.modelId)
			// console.log(node)
		},
		nodeCheck(data, checkedDatas) {
	      var _self = this;

	      //  获取node节点
	      var checkedNode = _self.$refs.tree.getNode(data.id);
	      //  checkedNode.checked  当前节点是否被选中
	      _self.$refs.tree.setChecked(data.id, checkedNode.checked, false);

	      //  设置子节点
	      function setChildren(data) {
	        //  如果有下级
	        // console.log(data)
	        if (data.children) {
	          data.children.forEach((child) => {
	            //  勾选或者取消勾选
	            _self.$refs.tree.setChecked(child.id, checkedNode.checked, false);
	            //  递归
	            setChildren(child);
	          })
	        }
	      }
	      setChildren(data);

	      //  设置父节点
	      function setParent(node) {
	        //  如果是勾选，并且有上级，选择上级
	        if (checkedNode.checked && node.parent) {
	          _self.$refs.tree.setChecked(node.parent.data, true, false);
	          setParent(node.parent);
	        }
	        //  如果是取消勾选，并且有上级，并且节点类型是menu，并且同级已经全部取消勾选，取消选择上级勾选
	        if (!node.checked && node.parent) {
	          //  同级节点是否还有勾选的
	          var checked = node.parent.childNodes.some((childNode) => { return childNode.checked == true })
	          if (checked == false) {
	            _self.$refs.tree.setChecked(node.parent.data, false, false);
	            setParent(node.parent);
	          }
	        }
	      }
	      setParent(checkedNode);
	    },
		configurationAuthority(){
   			// let tree = this.$refs.tree;
   			// this.authLists = tree.getCheckedNodes().concat(tree.getHalfCheckedNodes())
   			// var permissionIds = tree.getCheckedNodes().concat(tree.getCheckedKeys())
        // this.$refs.tree.forEach((tree) => {
        //   permissionIds = permissionIds.concat(tree.getCheckedKeys())
        // })
        var permissionIds = this.$refs.tree.getCheckedKeys();
        this.$axios({
   				method:'post',
   				url:'/system/role-permission/assignsPermission',
   				// data: {permissionIds:this.authLists,roleId: this.id },
          data: this.$qs.stringify({ roleId: this.id, permissionIds: permissionIds }, { arrayFormat: 'repeat' })
   			}).then((res) => {
   				this.$message.success('权限配置成功！');
   				this.$emit('closeDialog',false);
   			})
		},
		getModelByRoleId(){
      this.$axios({
        method:'get',
        url:'/system/role-permission/getPermissionIdsByRoleId',
        params: { roleId: this.id}
      }).then((res) => {
        if(res.code === 200){
          this.checkedKeys = res.data;
        }
      })
		},

       },
    mounted() {
		this.getModelByRoleId();
		this.getAuthList();
	}
  };
</script>

<style>
.roleDeploy{
	padding:30px 130px;
}
.btn{
	margin-top: 50px;
	text-align: center;
}

</style>
